<template>
  <div>
    <div class="login px-8 py-8 " v-if="props.show" @mouseleave="userQrImage = ''">
      <div class="flex justify-between mt-4">
        <div class="text-bold">用户中心</div>
        <div><CloseOutlined @click="close" /></div>
      </div>
      <a-divider class="my-2"></a-divider>

      <!-- 未登录状态 -->
      <div class="text-666 text-center" v-if="!token">
        <div>未授权用户</div>
        <div class="mt-4 mb-8">
          <a-button type="primary" size="small" @click="auth">一键授权</a-button>
        </div>
      </div>

      <!-- 已登陆 -->
      <div v-else>
        <div class="flex justify-between py-8">
          <div class="flex-1">
            <span>你好: <span class="text-999">普通用户</span></span>
            <div class="text-999 text-12 mt-4">当前服务端仅保存一个文件</div>
          </div>
          <div class="relative">
            <span class="cursor-pointer text-primary" @click="enterZone">
              <span class="mr-1">移动端</span>
              <phone-outlined />
            </span>
            <div class="user-center absolute" v-if="userQrImage">
              <img :src="userQrImage" alt="" width="60" />
            </div>
          </div>
        </div>
        <a-divider class="my-2"></a-divider>
        <div class="text-999 flex justify-between">
          <div>我的项目</div>
          <div>
            <a-switch
              v-model:checked="mode"
              checked-children="云端"
              un-checked-children="本地"
              size="small"
            />
          </div>
        </div>
        <ScrollItem height="180">
          <ul class="mt-2 program-list" v-if="programList.length > 0">
            <li
              class="flex justify-between py-4 px-4"
              v-for="(item, key) in programList"
              :class="{ active: current === item.id }"
              @click="select(item)"
            >
              <div>{{ item.title }}</div>
              <div class="flex gc-2 align-center">
                <a-tooltip>
                  <template #title>预览</template>
                  <EyeFilled @click="previewUI(item)" />
                </a-tooltip>
                <a-tooltip>
                  <template #title>同步到服务器</template>
                  <CloudServerOutlined @click.stop="asyncUserInfo(item)" v-show="!mode" />
                </a-tooltip>
              </div>
            </li>
          </ul>
          <div v-else class="flex flex-s">
            <InEmpty width="100" />
          </div>
        </ScrollItem>
      </div>
      <div class="tips text-999">当前为免费版</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import InEmpty from "../components/InEmpty.vue";
import ScrollItem from "../components/ScrollItem.vue";
import { asyncUserData, requireToken, userInfo } from "@/api/service/user";
import { getTreeData } from "@/store/utils/project";
import { getToken, setToken } from "@/store/utils/user";
import { CloseOutlined, CloudServerOutlined, EyeFilled, UserOutlined } from "@ant-design/icons-vue";
import { computed, onMounted, ref, watch } from "vue";
import { treeType } from "@/types/project";
import { preview } from "../bus/bin";
import { getQrcde } from "@/api/service/utils";
import { message } from "ant-design-vue";
const props = defineProps({
  show: {
    type: Boolean
  }
});

const userQrImage = ref();

const host = import.meta.env.VITE_CLIENT;
const prefix = "zone?token=";
const enterZone = () => {
  let data = {
    data: host + prefix + token.value
  };
  console.log(data.data);

  getQrcde(data).then((res) => {
    userQrImage.value = res.data;
  });
};

const previewUI = (data: treeType) => {
  preview(data);
};
const current = ref("");
const select = (item: treeType) => {
  current.value = item.id;
};

const mode = ref(false);
const qrcode = ref();
/**
 * todo:同步服务器
 *
 */
const cloudData = ref<Array<any>>([]);
onMounted(() => {
  if (!!token.value) {
    getUserInfo();
    let params = {
      data: token.value
    };
    getQrcde(params).then((res) => {
      qrcode.value = res.data;
    });
  }
});

const getUserInfo = () => {
  userInfo({
    token: token.value
  }).then((res) => {
    cloudData.value = [];
    var data = JSON.parse(res.data);
    if (!data) return;
    if (data instanceof Array) {
      cloudData.value = data;
    } else {
      cloudData.value.push(data);
    }
  });
};
/* 同步一条用户数据 */
const asyncUserInfo = (item: treeType) => {
  let params = {
    token: token.value,
    data: item
  };

  /* 同步用户信息 */
  asyncUserData(params).then((res) => {
    message.success(res.data);
  });
};
const emits = defineEmits(["update:show"]);
const close = () => {
  emits("update:show", false);
};
watch(mode, (value) => {
  if (value) {
    getUserInfo();
  }
});
const token = ref(getToken());
const programList = computed(() => {
  return mode.value ? cloudData.value : getTreeData();
});

/**
 * todo:授权
 */
const auth = () => {
  requireToken().then((res) => {
    setToken(res.data);
  });
};
</script>

<style lang="scss" scoped>
.user-center {
  right: calc(100% + 10px);
  background-color: #363636;
  padding: 4px;
  border-radius: 4px;
  z-index: 20;
  top: 0%;
}
.login {
  top: 48px;
  position: absolute;
  right: 12px;
  color: #333;
  background-color: white;
  width: 300px;
  z-index: 10;
  border-radius: 4px;
  height: 400px;
  .tips {
    background-color: #222;
    font-size: 12px;
    text-align: center;
    margin-top: 12px;
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
  }
}
ul{
  margin: 0;
  padding: 0;
}
.program-list {
  li {
    border: 1px solid #eee;
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: 4px;
    border: 1px solid transparent;
    font-size: 12px;
    &:hover {
      border: 1px solid #faad14;
      color: #faad14;
    }
  }
  li.active {
    background-color: #faad14;
    color: white;
  }
}
.text-primary {
  color: #faad14;
}
</style>
